{extend name="base" /}
{block name="body"}
<div class="layui-container pad30">
    <div class="layui-row">
        <div class="layui-col-md5 ">
          <div class="top-lft-content">
            <div class="people-item">
            </div>
            <div class="people-item">
                <div class="title">
                    <span class="title">性别分布</span>
                </div>
                <div class="bottom-content">
                    <div class="layui-row">
                        <div class="layui-col-md6 line-hr">
                          <i class="man-icon"></i>  
                          <div class="number-all small-number rgt20">
                            <span id="manNum">0</span>人
                          </div>
                        </div>
                        <div class="layui-col-md6">
                          <i class="woman-icon"></i> 
                          <div class="number-all small-number">
                            <span id="womanNum">0</span>人
                          </div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
          <div class="earchse-middle-left">
            <div class="title">
                <span class="title">年龄分布</span>
            </div>
            <div class="earchts-age">
              <div id="ageEarchts" class="age-figure" ></div>
            </div>
          </div>
          <div class="earchse-bottom-left">
            <div class="title">
                <span class="title">籍贯分布</span>
            </div>
            <div class="earchts-area">
              <div id="areaEarchts" class="map"></div>
            </div>
          </div>
        </div>
        <div class="layui-col-md2 disnone">-</div>
        <div class="layui-col-md5 ">
          <div class="rgt-degree">
            <div class="title">
              <span class="title">学位分布</span>
            </div>
            <div class="degree-content">
              <div id="degreeEarchts" class="subject-figure"></div>
            </div>
          </div>
          <div class="rgt-degree">
            <div class="title">
              <span class="title">学科门类分布</span>
            </div>
            <div class="degree-content">
              <div id="disciplineEarchts" class="subject-figure"></div>
            </div>
          </div>
          <div class="rgt-degree">
            <div class="title">
              <span class="title">职称分布</span>
            </div>
            <div class="degree-content">
              <div id="subjectEarchts" class="subject-figure"></div>
            </div>
          </div>
        </div>
    </div>
    <div class="periodical-box">
      <div class="layui-row">
        <div class="periodical-item layui-col-md2">
          <div id="periodical1" class="periodical-bar"></div>
        </div>
        <div class="periodical-item layui-col-md2">
          <div id="periodical2" class="periodical-bar"></div>
        </div>
        <div class="periodical-item layui-col-md2">
          <div id="periodical3" class="periodical-bar"></div>
        </div>
        <div class="periodical-item layui-col-md2">
          <div id="periodical4" class="periodical-bar"></div>
        </div>
        <div class="periodical-item layui-col-md2">
          <div id="periodical5" class="periodical-bar"></div>
        </div>
        <div class="periodical-item layui-col-md2">
          <div id="periodical6" class="periodical-bar"></div>
        </div>
      </div>

    </div>
    <div class="line-box">
      <div id="yearChart" class="year-chart"></div>
    </div>
</div>
{/block}
{block name="js"}
<script>
  var chartAge = document.getElementById('ageEarchts');
  var chartArea = document.getElementById('areaEarchts');
  var chartDegree = document.getElementById('degreeEarchts');
  var chartDiscipline = document.getElementById('disciplineEarchts');
  var chartSubject = document.getElementById('subjectEarchts');
  var periodical1 = document.getElementById('periodical1');
  var periodical2 = document.getElementById('periodical2');
  var periodical3 = document.getElementById('periodical3');
  var periodical4 = document.getElementById('periodical4');
  var periodical5 = document.getElementById('periodical5');
  var periodical6 = document.getElementById('periodical6');
  var chartYears = document.getElementById('yearChart');
  var myChartAge = echarts.init(chartAge);
  var myChartArea = echarts.init(chartArea, 'white');
  var myChartDegree =  echarts.init(chartDegree);
  var myChartDiscipline =  echarts.init(chartDiscipline);
  var myChartSubject =  echarts.init(chartSubject);
  var myPeriodical1 = echarts.init(periodical1);
  var myPeriodical2 = echarts.init(periodical2);
  var myPeriodical3 = echarts.init(periodical3);
  var myPeriodical4 = echarts.init(periodical4);
  var myPeriodical5 = echarts.init(periodical5);
  var myPeriodical6 = echarts.init(periodical6);
  var myChartYears =  echarts.init(chartYears);

  var optionAge,optionArea;

  // 初始化内容
  $(function() {
    initSex(); // 性别分布
    initAge(); // 年龄分布
    initHometown(); // 籍贯分布
    initSubject(); // 学位分布、学科门类分布、职称分布
    initPeriodical(); // 期刊分布
    initYearChart(); // 年代期刊

    // commonBar(degreeData,'学位分布',0);//学位分布
    // commonBar(disciplineData,'学科门类分布',1);//学科门类分布
    // commonBar(subjectData,'职称分布',2);//职称分布
    // periodicalInit();//期刊初始化
    // getYear();//年代期刊
  });

  // 性别分布
  function initSex() {
    $.ajax({
      url: '/admin/scholar/sexChart',
      type: 'POST',
      dataType: 'json',
      success: function(result) {
        if (result.code === 1) {
          var sexes = result.data.sexes
          if (sexes.length <= 0) {
            return
          }
          var manNum = 0;
          var womanNum = 0;
          for (i = 0; i < sexes.length; i++) {
            if (sexes[i].sex === "1" || sexes[i].sex === "男") {
                manNum += parseInt(sexes[i].count);
            }
            if (sexes[i].sex === "2" || sexes[i].sex === "女") {
                womanNum += parseInt(sexes[i].count);
            }
          }
          $('#manNum').html(manNum);
          $('#womanNum').html(womanNum);
        }
      }
    });
  }
  // 年龄分布
  function initAge() {
    $.ajax({
      url: '/admin/scholar/ageChart',
      type: 'POST',
      dataType: 'json',
      success: function(result) {
        if (result.code === 1) {
          var ages = result.data.ages
          if (ages.length <= 0) {
            return
          }
          var line = [];
          var yline = [];
          for (i = 0; i < ages.length; i++) {
            if (ages[i].ageScope == null || ages[i].count == null) {
              continue;
            }
            line[i] = ages[i].ageScope;
            yline[i] = ages[i].count;
          }
          optionAge = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'none'
              },
              formatter: function (params) {
                return params[0].name + ': ' + params[0].value;
              }
            },
            xAxis: {
              data: line,
              axisTick: {show: false},
              axisLine: {show: false},
              axisLabel: {
                color: '#000'
              }
            },
            yAxis: {
              splitLine: {show: false},
              axisTick: {show: false},
              axisLine: {show: false},
              axisLabel: {show: false}
            },
            series: [{
              name: 'hill',
              type: 'pictorialBar',
              barCategoryGap: '-130%',
              symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
              itemStyle: {
                opacity: 0.5,
                color: function(params) {
                  // build a color map as your need.
                  //定义一个颜色集合
                  var colorList = [
                    '#fc7d86','#fcab6a','#fedb59','#53e499','#55d5c8'
                  ];
                  //对每个bar显示一种颜色
                  return colorList[params.dataIndex]
                },
              },
              emphasis: {
                itemStyle: {
                  opacity: 1
                }
              },
              data: yline,
              z: 10
            }]
          };
          optionAge && myChartAge.setOption(optionAge);
        }
      }
    });
  }
  // 籍贯分布
  function initHometown() {
    $.ajax({
      url: '/admin/scholar/hometownChart',
      type: 'POST',
      dataType: 'json',
      success: function(result) {
        if (result.code === 1) {
          var hometowns = result.data.hometowns
          if (hometowns.length <= 0) {
            return
          }
          optionArea = {tooltip: {
              formatter:function(params,ticket, callback){
                if (isNaN(params.value)) {
                  params.value = 0;
                }
                return params.name+'<br />'+'排名：'+params.value
              }//数据格式化
            },
            visualMap: {
              min: 0,
              max: 1500,
              left: 'left',
              top: 'bottom',
              text: ['高','低'],//取值范围的文字
              inRange: {
                color: ['#e0ffff', '#006edd']//取值范围的颜色
              },
              show:true//图注
            },
            geo: {
              map: 'china',
              roam: false,//不开启缩放和平移
              zoom:1.23,//视角缩放比例
              label: {
                normal: {
                  show: true,
                  fontSize:'10',
                  color: 'rgba(0,0,0,0.7)'
                }
              },
              itemStyle: {
                normal:{
                  borderColor: 'rgba(0, 0, 0, 0.2)'
                },
                emphasis:{
                  areaColor: '#F3B329',//鼠标选择区域颜色
                  shadowOffsetX: 0,
                  shadowOffsetY: 0,
                  shadowBlur: 20,
                  borderWidth: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            },
            series : [
              {
                name: '籍贯',
                type: 'map',
                geoIndex: 0,
                data: hometowns
              }
            ]
          };
          optionArea && myChartArea.setOption(optionArea);
        }
      }
    });
  }
  // 学位分布、学科门类分布、职称分布
  function initSubject() {
    $.ajax({
      url: '/admin/scholar/subjectChart',
      type: 'POST',
      dataType: 'json',
      success: function(result) {
        if (result.code === 1) {
          var academicDegrees = result.data.academicDegrees
          var subjects = result.data.subjects
          var professionalTitles = result.data.professionalTitles

          commonBar(academicDegrees,'学位分布',0);//学位分布
          commonBar(subjects,'学科门类分布',1);//学科门类分布
          commonBar(professionalTitles,'职称分布',2);//职称分布
        }
      }
    });
  }
  // TODO 期刊
  function initPeriodical() {
      // TODO
  }
  // 年代期刊
  function initYearChart() {
      $.ajax({
          url: '/admin/scholar/yearChart',
          type: 'POST',
          dataType: 'json',
          success: function(result) {
              if (result.code === 1) {
                  var cooperates = result.data.cooperateList;
                  if (cooperates.length <= 0) {
                      return
                  }
                  var data = [];
                  var zline = [];
                  var idx = 0;
                  for (i = 0; i < cooperates.length; i++) {
                      if (cooperates[i].year == null
                          || cooperates[i].count == null
                          || cooperates[i].resourceCode == null) {
                          continue;
                      }
                      var codeName = "";
                      // J 期刊   B 图书   C 会议   S 标准   D 学位论文   P 专利   R 报告   Q 其他   A 成果   O 项目   I SCI  E EI    U SCOPUS   T 团队   Y 活动
                      if (cooperates[i].resourceCode === "J") {
                          codeName = "期刊";
                      } else if (cooperates[i].resourceCode === "B") {
                          codeName = "图书";
                      } else if (cooperates[i].resourceCode === "C") {
                          codeName = "会议";
                      } else if (cooperates[i].resourceCode === "S") {
                          codeName = "标准";
                      } else if (cooperates[i].resourceCode === "D") {
                          codeName = "学位论文";
                      } else if (cooperates[i].resourceCode === "P") {
                          codeName = "专利";
                      } else if (cooperates[i].resourceCode === "R") {
                          codeName = "报告";
                      } else if (cooperates[i].resourceCode === "Q") {
                          codeName = "其他";
                      } else if (cooperates[i].resourceCode === "A") {
                          codeName = "成果";
                      } else if (cooperates[i].resourceCode === "O") {
                          codeName = "项目";
                      } else if (cooperates[i].resourceCode === "I") {
                          codeName = "SCI";
                      } else if (cooperates[i].resourceCode === "E") {
                          codeName = "EI";
                      } else if (cooperates[i].resourceCode === "U") {
                          codeName = "SCOPUS";
                      } else if (cooperates[i].resourceCode === "T") {
                          codeName = "团队";
                      } else if (cooperates[i].resourceCode === "Y") {
                          codeName = "活动";
                      }
                      data[idx] = [cooperates[i].year, cooperates[i].count, codeName];
                      zline.push(codeName);
                      idx++;
                  }
                  var option = {
                      tooltip: {
                          trigger: 'axis',
                          axisPointer: {
                              type: 'line',
                              lineStyle: {
                                  color: 'rgba(0,0,0,0.2)',
                                  width: 1,
                                  type: 'solid'
                              }
                          }
                      },
                      legend: {
                          data: zline
                      },
                      dataZoom: {
                          show: true,
                          realtime: true,
                          start: 65,
                          end: 85
                      },
                      singleAxis: {
                          top: 50,
                          bottom: 50,
                          axisTick: {},
                          axisLabel: {},
                          type: 'time',
                          axisPointer: {
                              animation: true,
                              label: {
                                  show: true
                              }
                          },
                          splitLine: {
                              show: true,
                              lineStyle: {
                                  type: 'dashed',
                                  opacity: 0.2
                              }
                          }
                      },
                      series: [
                          {
                              type: 'themeRiver',
                              emphasis: {
                                  itemStyle: {
                                      shadowBlur: 20,
                                      shadowColor: 'rgba(0, 0, 0, 0.8)'
                                  }
                              },
                              data: data
                          }
                      ]
                  };
                  option && myChartYears.setOption(option)
              }
          }
      });
  }

  //学位学科职称通用方法
  function commonBar(data,name,type){
    var commonOption = {
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c} ({d}%)'
      },
      legend: {
        orient: 'vertical',
        right: '2%',
        top: '35%',
        formatter: function (name) {
          var valNum = 0;
          var total = 0;
          for (var i = 0; i < data.length; i++) {
            total += parseInt(data[i].value);
            if (data[i].name === name) {
              valNum = parseInt(data[i].value);
            }
          }
          return name + '  ' + valNum + '   ' + Math.round(valNum/total * 10000) / 100 + '%';
        }
      },
      series: [
        {
          name: name,
          type: 'pie',
          radius: ['50%', '80%'],
          center: ['40%', '45%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'left'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: '25',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: data
        }
      ]
    };
    if(type==0){ //学位
      myChartDegree.setOption(commonOption)
    }else if(type==1){ //学科
      myChartDiscipline.setOption(commonOption)
    }else{ //职称
      myChartSubject.setOption(commonOption)
    }
  }

  //期刊实例
  function periodicalInit(){

      for(var b=0;b<periodicalData.length;b++){
          periodical(periodicalData[b],b)
      }
  }
  function periodical(data,type){

    var newDataTotal = 0;
    for(var a=0;a<periodicalData.length;a++){
      newDataTotal+=periodicalData[a].value
    }
    newDataTotal=newDataTotal-data.value
    var newData = [{
      name:'其他',
      value:newDataTotal
    }]

    var newDataArr = [data].concat(newData);
    var names = newDataArr[0].name + '\n'+newDataArr[0].value
    var perOption={
      title: {
        show:true,
        text:newDataArr[0].name,
        subtext:newDataArr[0].value,
        left: 'center',
        top: '38%',
        textStyle: {
          color: '#000',
          fontsize:15,
          lineHeight:20
        },
        subtextStyle:{
          color: '#000',
          fontsize:50,

        }

      },
      tooltip: {
        trigger: 'item'
      },
      series: [
        {
          type: 'pie',
          radius: ['80%', '90%'],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: 'center',

          },
          itemStyle: {
            color: function(params) {
              // build a color map as your need.
              //定义一个颜色集合
              var colorLists = [
                '#096bce','#e0e7ef'
              ];
              //对每个bar显示一种颜色
              return colorLists[params.dataIndex]
            },

          },
          emphasis: {
            label: {
              show: true,
              fontSize: '20',
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data:newDataArr
        }
      ]
    };
    if(type==0){
      myPeriodical1.setOption(perOption)
    }else if(type==1){
      myPeriodical2.setOption(perOption)
    }else if(type==2){
      myPeriodical3.setOption(perOption)
    }else if(type==3){
      myPeriodical4.setOption(perOption)
    }else if(type==4){
      myPeriodical5.setOption(perOption)
    }else if(type==5){
      myPeriodical6.setOption(perOption)
    }
  }
</script>
{/block}
{block name="css"}
<style>
  .layui-container{
    margin:30px auto !important;
    padding: 0 !important;
    width:90% !important;
  }
  @media screen and (min-width: 1300px){
    .layui-container {
      width: 1300px;
    }
  }
  .layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table[lay-even] tr:nth-child(even){
    background: #fff;
    color:#000;
  }

  .rgt{
    float: right;
  }
  .rgt15{
    padding-right: 15px;
  }
  .disnone{
    visibility: hidden;
  }
  .layui-btn{
    border-radius: 5px !important;
    color:#000 !important;
    border-color: #000 !important;
  }
  .layui-btn-sm{
    padding: 0 20px !important;
  }
  .icon-people{
    width:100%;
    margin:10px 30px;
  }
  .icon-people .blue-people,.icon-people .gray-people{
    display: inline-block;
    width: 14px;
    height: 38px;
    margin-right: 5px;
  }
  .icon-people .blue-people{
    background: url('__ADMIN__/images/blue-people.png') no-repeat;
  }
  .icon-people .gray-people{
    background: url('__ADMIN__/images/gray-people.png') no-repeat;
  }
  .people-number{
    margin-left: 30px;
    color: #9695a5;
  }
  .number-all{
    margin:10px 0;
    color: #9695a5;
    height: 38px;
    line-height: 38px;
    text-align: right;
  }
  .number-all span{
    font-size: 30px;
    font-family: Arial, Helvetica, sans-serif;
    color:#000;
    margin-right: 15px;
  }
  .people-item,.earchse-middle-left,.earchse-bottom-left{
    margin-bottom: 50px;
  }
  .man-icon{
    display: inline-block;
    width:29px;
    height: 61px;
    background: url('__ADMIN__/images/man.png') no-repeat;
    margin-left: 30px;
    margin:10px 0 10px 30px;
    float: left;
  }
  .woman-icon{
    display: inline-block;
    width:29px;
    height: 61px;
    background: url('__ADMIN__/images/woman.png') no-repeat;
    margin:10px 0 10px 30px;
    float: left;
  }
  .line-hr{
    border-right: 1px solid #dfdfdf;
  }
  .small-number{
    display: inline-block;
    height: 61px;
    line-height: 61px;
    float: right;
  }
  .rgt20{
    margin-right: 20px;
  }
  .age-figure{
    width:100%;
    height: 300px;
  }
  .subject-figure{
      width:100%;
      height: 240px;
  }
  .earchts-area{
    width:500px;
    height: 300px;
    margin: 20px 0;
  }
  .map{
    width: 100%;
    background:white !important;
    height: 100%;
    margin: 0px;
  }
  .amap-controls,.amap-logo,.amap-copyright{
    display: none !important;
  }
  .degree-content{
    display: flex;
    margin-top: 50px;
  }
  .common-bars{
    flex: 1;
  }
  .degree-info{
    flex: 1;
  }
  .rgt-degree .title{
    margin-bottom: 15px;
  }
  .line-jg{
    display: inline;
    width:1px;
    height:25px;
    background: #dfdfdf;
    float: right;
  }
  .icon-circle{
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    margin-right: 4px;
  }
  .blue{
    background: #3ba1ff;
  }
  .green{
    background: #4fcb74;
  }
  .yellow{
    background: #fbd438;
  }
  .rgt-degree{
    margin-bottom: 50px;
  }
  .periodical-bar{
    width:100%;
    height: 150px;
  }
  .periodical-item ul{
    width:100px;
    margin:10px auto;
  }
  .periodical-item ul li{
    margin-bottom: 10px;
  }
  .periodical-box{
    border:1px solid #dfdfdf;
    padding: 20px;
  }
  .line-box{
    margin:50px 0;
  }
  .year-chart{
    width:100%;
    height: 400px;
  }
</style>
{/block}